<template>

    <div>

        <span>查看 </span>
        <el-input-number size='mini' v-model="days"  :min="7" :max="50" label="描述文字"></el-input-number>
        <span> 天内数据</span>
        <el-button type="success" @click='getDefaultData' icon="el-icon-search" style="position: relative;left: 13px;margin: 5px;" >获取</el-button>
    <div class="container">

        <div class="schart-box">
<!--            <div class="content-title">折线图</div>-->
            <schart class="schart" canvasId="line" :options="options"></schart>
        </div>
    </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';


export default {
    name: 'DayOrderStatistics',
    components: {
        Schart
    },
    data(){
        return{
            loginRole: localStorage.getItem('loginRole'),
            days: 7,
            dataList:[], //从后端获取的统计数据
            options: {
                type: 'line',
                title: {
                    text: '最近几个月各品类销售趋势图'
                },
                bgColor: '#fbfbfb',
                labels: [],
                datasets: [
                    {
                        label: '',
                        data: []
                    }

                ]
            }
        }
    },
    created() {
        this.getDefaultData();
    },
    methods:{
        //获取统计数据
        getDefaultData(){
            const _this = this;
            if (this.loginRole === 'admin'){
                this.$http.get('dev-api/admin/order/orderLine/'+this.days)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.dataList = resp.data.data;
                            _this.getXY();
                            _this.$message.success("获取数据成功")
                        }else {
                            _this.$message.error(resp.data.msg)
                        }
                    })
            }else{
                this.$http.get('dev-api/seller/order/orderLine/'+this.days)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.dataList = resp.data.data;
                            _this.getXY();
                            _this.$message.success("获取数据成功")
                        }else {
                            _this.$message.error(resp.data.msg)
                        }
                    })
            }

        },
        //获取xy轴的数据
        getXY(){
            let dataX = [];
            let dataY = [];
            for (let i = 0; i < this.dataList.length; i++) {
                dataX.push(this.dataList[i].date);
                dataY.push(this.dataList[i].quantity);
            }
            if (this.loginRole === 'admin'){
                this.options.title.text = "所有店铺最近"+this.days+"天内日订单量统计";
            }else{
                this.options.title.text = "本店铺最近"+this.days+"天内日订单量统计";
            }

            this.options.labels = dataX;
            this.options.datasets[0].data = dataY;
        },

    }
};
</script>

<style scoped>
.schart-box {
    display: inline-block;
    margin: 20px;
}
.schart {
    width: 1000px;
    height: 500px;
}
.content-title {
    clear: both;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
</style>